<template>
  <div class="dashboard-container">
    <!--    <div class="dashboard-text">name: {{ name }}</div>-->
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card style="">
          <div slot="header">
            <span>摄像头设置</span>
          </div>
          <el-form ref="form-camera" :model="formCamera" label-width="100px">
            <el-form-item label="摄像头1">
              <el-input v-model="formCamera.G_camera1.url" />
              <el-checkbox v-model="formCamera.G_camera1.monitorFlag">新添加摄像头</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera1.fenceFlag">围栏检测</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera1.detectFlag">识别检测</el-checkbox>
            </el-form-item>
            <el-form-item label="摄像头2">
              <el-input v-model="formCamera.G_camera2.url" />
              <el-checkbox v-model="formCamera.G_camera2.monitorFlag">新添加摄像头</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera2.fenceFlag">围栏检测</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera2.detectFlag">识别检测</el-checkbox>
            </el-form-item>
            <el-form-item label="摄像头3">
              <el-input v-model="formCamera.G_camera3.url" />
              <el-checkbox v-model="formCamera.G_camera3.monitorFlag">新添加摄像头</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera3.fenceFlag">围栏检测</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera3.detectFlag">识别检测</el-checkbox>
            </el-form-item>
            <el-form-item label="摄像头4">
              <el-input v-model="formCamera.G_camera4.url" />
              <el-checkbox v-model="formCamera.G_camera4.monitorFlag">新添加摄像头</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera4.fenceFlag">围栏检测</el-checkbox>
              <el-checkbox v-model="formCamera.G_camera4.detectFlag">识别检测</el-checkbox>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <el-button type="danger" @click="btnClear()">清空</el-button>
            <el-button type="primary" @click="btnUpload()">提交</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card style="width: 500px">
          <div slot="header">系统设置</div>
          <el-switch v-model="sysVideo" active-text="摄像头" inactive-text="测试视频" />
          <el-tooltip class="item" effect="dark" content="如遇摄像头卡顿，调大此值" placement="bottom">
            <el-form style="margin-top: 10px; margin-left: -32px;" :model="system" label-width="100px">
              <el-form-item label="性能优化">
                <el-input v-model.number="system.loop" type="number" />
              </el-form-item>
            </el-form>
          </el-tooltip>
          <div class="btn-save">
            <el-button type="primary" @click="sysSave()">保存</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card style="margin-top: 10px">
          <div slot="header">报警历史记录</div>
          <el-button @click="changeHistory(1)">开启历史记录</el-button>
          <el-button @click="changeHistory(-1)">关闭历史记录</el-button>
          <el-tabs v-if="historyState" v-model="activeAlarmName" type="card" @tab-click="alarmTabsClick">
            <el-tab-pane label="围栏报警" name="border">
              <AlarmTable type="border" />
            </el-tab-pane>
            <el-tab-pane label="安全帽报警" name="hat">
              <AlarmTable type="hat" />
            </el-tab-pane>
            <el-tab-pane label="手机报警" name="phone">
              <AlarmTable type="phone" />
            </el-tab-pane>
            <el-tab-pane label="反光服报警" name="reflect">
              <AlarmTable type="reflect" />
            </el-tab-pane>
            <el-tab-pane label="烟火报警" name="fire">
              <AlarmTable type="fire" />
            </el-tab-pane>
            <el-tab-pane label="吸烟报警" name="smoke">
              <AlarmTable type="smoking" />
            </el-tab-pane>
            <el-tab-pane label="速度报警" name="speed">
              <AlarmTable type="speed" />
            </el-tab-pane>
            <el-tab-pane label="杂物报警" name="sundry">
              <AlarmTable type="sundry" />
            </el-tab-pane>
            <el-tab-pane label="睡觉报警" name="sleep">
              <AlarmTable type="sleep" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    AlarmTable: () => import('@/components/AlarmTable')
  },
  data() {
    return {
      activeAlarmName: 'border',
      historyState: false,
      formCamera: {
        G_camera1: {
          url: '',
          fenceFlag: false,
          detectFlag: false,
          monitor_flag: 0,
          monitorFlag: false
        },
        G_camera2: {
          url: '',
          fenceFlag: false,
          detectFlag: false,
          monitor_flag: 0,
          monitorFlag: false
        },
        G_camera3: {
          url: '',
          fenceFlag: false,
          detectFlag: false,
          monitor_flag: 0,
          monitorFlag: false
        },
        G_camera4: {
          url: '',
          fenceFlag: false,
          detectFlag: false,
          monitor_flag: 0,
          monitorFlag: false
        }
        // allCameraUrl: '',
        // monitor_flag: false,
        // fenceFlag: false,
        // detectFlag: false
      },
      sysVideo: false,
      system: {
        loop: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'camera1',
      'camera2',
      'camera3',
      'camera4',
      'useVideo',
      'monitorFlag' // 1 0
    ])
  },
  created() {
    console.log(1)
    console.log(this.$store.state.camera.camera1)
    this.formCamera.G_camera1 = this.$store.state.camera.camera1
    this.formCamera.G_camera2 = this.$store.state.camera.camera2
    this.formCamera.G_camera3 = this.$store.state.camera.camera3
    this.formCamera.G_camera4 = this.$store.state.camera.camera4
    this.sysVideo = this.useVideo
    this.system.loop = this.$store.state.camera.loop
  },
  methods: {
    changeHistory(num) {
      if (num === 1) {
        this.historyState = true
      } else if (num === -1) {
        this.historyState = false
      }
    },
    alarmTabsClick(tab, event) {
      console.log(tab)
    },
    btnClear() {
      this.$store.dispatch('camera/setCamera1', {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      })
      this.$store.dispatch('camera/setCamera2', {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      })
      this.$store.dispatch('camera/setCamera3', {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      })
      this.$store.dispatch('camera/setCamera4', {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      })
      // this.$store.dispatch('camera/clearAllCamera')
      // this.formCamera.fenceCameraUrl = this.fenceCamera
      // this.formCamera.allCameraUrl = this.allCamera
      this.formCamera.G_camera1 = {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      }
      this.formCamera.G_camera2 = {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      }
      this.formCamera.G_camera3 = {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      }
      this.formCamera.G_camera4 = {
        url: '',
        fenceFlag: false,
        detectFlag: false,
        monitor_flag: 0,
        monitorFlag: false
      }
      this.$message.success('清空成功')
    },
    btnUpload() {
      this.$store.dispatch('camera/setCamera1', this.formCamera.G_camera1)
      this.$store.dispatch('camera/setCamera2', this.formCamera.G_camera2)
      this.$store.dispatch('camera/setCamera3', this.formCamera.G_camera3)
      this.$store.dispatch('camera/setCamera4', this.formCamera.G_camera4)
      // this.$store.dispatch('camera/getFenceCamera', this.formCamera.fenceCameraUrl)
      // this.$store.dispatch('camera/getAllCamera', this.formCamera.allCameraUrl)
      // this.$store.dispatch('camera/setMonitorFlag', this.formCamera.monitor_flag)
      this.$message.success('提交成功')
    },
    sysSave() {
      this.$store.dispatch('camera/setVideo', this.sysVideo)
      this.$store.dispatch('camera/setLoop', this.system.loop)
      this.$message.success('保存成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .button-group {
      display: flex;
      justify-content: right;
    }
    .btn-save {
      display: flex;
      justify-content: right;
      margin-top: 20px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
